<template>
    <div class="container container-achievement">
        <a-spin tip="Loading..." :spinning="loading">
            <div class="page-top">
                <a-carousel autoplay arrows draggable>
                    <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                        <a-icon type="left-circle" />
                    </div>
                    <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                        <a-icon type="right-circle" />
                    </div>
                    <div class="index-bgbox" v-for="item in bannerList">
                        <img class="page-top-bg" :src="item" />

                    </div>
                </a-carousel>
                <div class="page-top-panel">
                    <div class="page-top-title">成果直通车</div>
                    <div class="top-input-box">
                        <input class="top-input" v-model="keywords" type="text" placeholder="输入您想查找的成果关键词"
                            @keyup.enter="resetList">
                        <a-icon class="top-input-ico" type="search" @click="resetList" />
                    </div>
                </div>
            </div>
            <div class="search-panel">
                <div class="search-top">
                    <div class="search-switch" @click="searchShow=!searchShow">
                        <a-icon type="filter" />
                        <span>筛选列表</span>
                        <a-icon type="caret-down" />
                    </div>
                    <a-button type="primary" class="search-top-btn" @click="resetList">搜索</a-button>
                    <a-button type="warning" class="search-top-btn" @click="addAch" v-if="validAddAch()">新增成果</a-button>
                </div>
                <div class="search-main" :class="searchShow &&'search-main-show'">
                    <div class="search-row">
                        <div class="search-title">成果类别</div>
                        <a-checkbox-group v-model="pageParams.achievementCategory" @change="searchChange('achievementCategory')">
                            <a-checkbox value="发明专利">发明专利</a-checkbox>
                            <a-checkbox value="实用新型专利">实用新型专利</a-checkbox>
                            <a-checkbox value="外观设计专利">外观设计专利</a-checkbox>
                            <a-checkbox value="技术">技术</a-checkbox>
                            <a-checkbox value="软件著作权">软件著作权</a-checkbox>
                            <a-checkbox value="版权等其他著作权">版权等其他著作权</a-checkbox>
                            <a-checkbox value="集成电路布图设计">集成电路布图设计</a-checkbox>
                            <a-checkbox value="植物新品种">植物新品种</a-checkbox>
                            <a-checkbox value="其他">其他</a-checkbox>
                        </a-checkbox-group>
                    </div>
                    <div class="search-row">
                        <div class="search-title">课题来源</div>
                        <a-checkbox-group v-model="pageParams.taskSource" @change="searchChange('taskSource')">
                            <a-checkbox :value="item.content" v-for="item in taskSourceList"
                                :key="item.id">{{item.content}}</a-checkbox>
                        </a-checkbox-group>
                    </div>
                    <div class="search-row">
                        <div class="search-title">所属技术类别</div>
                        <a-checkbox-group v-model="pageParams.belongToTechnologyCategory"
                            @change="searchChange('belongToTechnologyCategory')">
                            <a-checkbox :value="item.content" v-for="item in territoryList"
                                :key="item.id">{{item.content}}</a-checkbox>
                        </a-checkbox-group>
                    </div>
                    <div class="search-row">
                        <div class="search-title">应用状态</div>
                        <a-checkbox-group v-model="pageParams.useState" @change="searchChange('useState')">
                            <a-checkbox value="产业化应用">产业化应用</a-checkbox>
                            <a-checkbox value="小批量或小范围应用">小批量或小范围应用</a-checkbox>
                            <a-checkbox value="试用">试用</a-checkbox>
                            <a-checkbox value="未应用">未应用</a-checkbox>
                            <a-checkbox value="应用后停用">应用后停用</a-checkbox>
                        </a-checkbox-group>
                    </div>
                    <div class="search-row">
                        <div class="search-title">推广形式</div>
                        <a-checkbox-group v-model="pageParams.promotionForm" @change="searchChange('promotionForm')">
                            <a-checkbox :value="item.content" v-for="item in promotionFormList"
                                :key="item.id">{{item.content}}</a-checkbox>
                        </a-checkbox-group>
                    </div>
                    <div class="search-row">
                        <div class="search-title">成果年份</div>
                        <a-date-picker mode="year" class="yuan-form-input" placeholder="选择年份" v-model="pageParams.achievementYear"
                            inputReadOnly format="YYYY" :open="monthPickShow" @panelChange="handlePanelChange"
                            @openChange="handleOpenChange" />
                    </div>
                    <div class="search-action" @click="searchShow=!searchShow">
                        <span>收起</span>
                        <a-icon type="double-left" />
                    </div>
                </div>
            </div>
            <div class="page-content" v-if="pageList.length>0">
                <div>
                    <template v-for="item in pageList">
                        <PageListVue @clickList="jumpDetail" :listInfo="item" />
                    </template>
                </div>
                <div style="text-align:right">
                    <a-pagination v-model="pageNum" :pageSize="pageSize" :total="total" show-less-items @change="pageChange" />
                </div>

            </div>
            <div class="page-content" v-else>
                <div class="list-null">
                    <div class="iconfont">&#xe642;</div>
                    <div>暂无数据</div>
                </div>

            </div>
        </a-spin>

        <AddAchVue :visible="addVisible" @closeModal="() => addVisible = false" :isAdd="true" />
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { Vue, Component } from "vue-property-decorator";
import PageListVue from "./components/pageList.vue";
import AddAchVue from "@/components/addAch.vue";
import { getStorageUserInfo } from "@/utils";
import { UserModule } from "@/store/modules/userModules";
@Component({
    name: "dom",
    components: { PageListVue, AddAchVue },
})
export default class index extends Vue {
    jumpDetail(listInfo) {
        // 如果没登录 提示登录
        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            UserModule.setShowLoginPanel(true)
            this.$message.warning("您还没有登录，请登录后重试");
            return;
        }
        this.$router.push({ name: "achievementDetail", query: { id: listInfo.id } });
    }
    pageNum = 1;
    pageSize = 10;
    total = 20;
    keywords = "";
    loading = false;
    pageParams: any = {
        achievementYear: "",
    };
    searchShow = false;
    splitContent(str: string) {
        return str.slice(0, 65) + "...";
    }
    mounted() {
        this.loading = true;
        Promise.all([this.getTerritoryList(), this.getTaskSourceList(), this.getPromotionFormList(), this.getBanner()]).then(
            () => {
                this.loading = false;
                this.getList();
            }
        );
    }

    pageList = [];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const pageParamsStr = {};
            for (let i in this.pageParams) {
                if (this.pageParams[i] && typeof this.pageParams[i] === "object") {
                    pageParamsStr[i] = this.pageParams[i].join(",");
                } else {
                    pageParamsStr[i] = this.pageParams[i];
                }
            }
            const res = await api.getActList({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                achievementName: this.keywords,
                ...pageParamsStr,
            });
            this.pageList = res.data?.rows ||[];
            this.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pageNum = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pageSize = pageSize;
        this.pageNum = page;
        this.getList();
    }

    taskSourceList = [];
    async getTaskSourceList() {
        try {
            const res = await api.getSetting("2");
            this.taskSourceList = res.data;
        } finally {
            //this.loading = false;
        }
    }

    territoryList = [];
    async getTerritoryList() {
        try {
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            //
        }
    }
    promotionFormList = [];
    async getPromotionFormList() {
        try {
            const res = await api.getSetting("4");
            this.promotionFormList = res.data;
        } finally {
            //this.saveLoading = false;
        }
    }

    monthPickShow = false;
    handlePanelChange(value) {
        this.pageParams.achievementYear = value.format("YYYY");
        this.monthPickShow = false;
    }
    handleOpenChange(status) {
        if (status) {
            this.monthPickShow = true;
        } else {
            this.monthPickShow = false;
        }
    }

    addVisible = false;
    addAch() {
        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            UserModule.setShowLoginPanel(true)
            this.$message.warning("您还没有登录，请登录后重试");
            return;
        }
        this.addVisible = true;
    }
    validAddAch() {
        const userInfo = getStorageUserInfo();
        if (userInfo.roleName === "成果方") {
            return true;
        } else if (userInfo.roleName === "中介方") {
            return true;
        } else if (userInfo.roleName === "管理员") {
            return true;
        }
        return false;
    }

    bannerList = [""];
    async getBanner() {
        this.pageList = [];
        try {
            const res = await api.getBannerList({
                pageTable: "成果直通车banner",
            });

            const rows = res.data?.rows ||[];
            const pictures=rows[0]?.pictures||''
            this.bannerList = pictures ? JSON.parse(pictures) : [""];
        } finally {
            //this.loading = false;
        }
    }
    searchChange(type) {
        const one = this.pageParams[type];
        if (one && one.length > 1) {
            this.pageParams[type] = [one[one.length - 1]];
        }
        this.resetList()
    }
}
</script>

<style lang="scss">
.container-achievement {
    .page-top {
        position: relative;
    }
    .index-bgbox {
        min-height: 330px;
    }
    .page-top-bg {
        width: 100%;
    }
    .page-top-panel {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding-top: 8%;
        padding-left: 10%;
    }
    .page-top-title {
        font-weight: bold;
        font-size: 45px;
        color: #132042;
    }

    .top-input-box {
        width: 620px;
        box-shadow: 0px 10px 12px 0px rgba(47, 101, 243, 0.2);
        height: 60px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-radius: 100px;
        margin-top: 30px;
    }
    .top-input {
        font-weight: bold;
        font-size: 18px;
        height: 100%;
        border: unset;
        background-color: transparent;
        padding: 0 40px;
        flex-grow: 1;
        outline: unset;
    }
    .top-input-ico {
        display: block;
        width: 140px;
        background: #2f65f3;
        color: #ffffff;
        height: 100%;
        font-size: 30px;
        border-radius: 0 100px 100px 0;
        line-height: 65px;
        cursor: pointer;
        font-weight: bold;
    }

    .page-content {
        padding: 50px 0;
        display: block;
        margin: 0 auto;
        width: 1350px;
    }
}
</style>
